<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <mata http-equiv="X-UA-Compatible" content="ie=edge"></mata>
  <title>月悦听播放器</title>
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <div class="wrap">
    <div class="play_wrap" id="player">
      <div class="search_bar">
        <img src="images/player_title.png">
        <!-- 搜索歌曲 -->
        <input type="text" autocomplete="off" v-model="query" @keyup.enter="searchMusic();">
      </div>
      <div class="center_con">
        <!-- 搜索歌曲列表 -->
        <div class="song_wrapper" ref="song_wrapper">
          <ul class="song_list">
            <li v-for="item in musicList">
              <!-- 点击放歌 -->
              <a href="javascript:;" @click='playMusic(item.id)'></a>
              <b>{{item.name}}</b>
              <span>
                <!-- 点击播放MV -->
                <i @click="playMv(item.mvid)" v-if="item.mvid!=0"></i>
              </span>
            </li>
          </ul>
          <img src="images/line.png" class="switch_btn">
        </div>
        <!-- 歌曲信息容器 -->
        <div class="player_con" :class="{playing:isPlay}">
          <img src="images/player_bar.png" class="play_bar">
          <!-- 黑胶碟片 -->
          <img src="images/disc.png" class="disc autoRotate">
          <img :src="coverUrl==''?'./images/cover.png':coverUrl" class="cover autoRotate">
        </div>
        <!-- 评论容器 -->
        <div class="comment_wrapper" ref="comment_wrapper">
          <h5 class="title">热门留言</h5>
          <div class="comment_list">
            <dl v-for="item in hotComments">
              <dt><img :src="item.user.avatarUrl"></dt>
              <dd class="name">{{item.user.nickname}}</dd>
              <dd class="detail">
                {{item.content}}
              </dd>
            </dl>
          </div>
          <img src="images/line.png" class="right_line">
        </div>
      </div>
      <div class="audio_con">
        <audio ref='audio' @play="play" @pause="pause" :src="musicUrl" class="myaudio" controls autoplay loop></audio>
      </div>
      <div class="video_con" v-show="showVideo">
        <video ref="video" :src="mvUrl" controls="controls"></video>
        <div class="mask" @click="closeMv"></div>
      </div>
    </div>
  </div>

  <!-- 开发环境版本，包括有帮助的命令行警告 -->
  <script src="lib/vue.min.js"> </script>
  <!-- 官网提供的axios在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script>
    /* 设置axios的基地址 */
    axios.defaults.baseURL = 'https://autumnfish.cn';
    var app = new Vue({
      el: '#player',
      data: {
        /* 搜索关键字 */
        query: '',
        /* 歌曲列表 */
        musicList: [],
        /* 歌曲url */
        musicUrl: '',
        /* 是否正在播放 */
        isPlay: false,
        /* 歌曲热门评论 */
        hotComments: [],
        /* 歌曲封面地址 */
        coverUrl: '',
        /* 显示视频播放 */
        showVideo: false,
        /* mv地址 */
        mvUrl: ''
      },
      methods: {

        /* 搜索歌曲 */
        searchMusic() {
          if (this.query == 0) {
            return
          }
          axios.get('/search?keywords=' + this.query).then(response => {
            /* 保存内容 */
            this.musicList = response.data.result.songs;
          })
          /* 清空内容 */
          this.query = ''
        },
        /* 播放歌曲 */
        playMusic(musicId) {
          /* 获取歌曲url */
          axios.get('/song/url?id=' + musicId).then(response => {
            /* 保存歌曲url地址 */
            this.musicUrl = response.data.data[0].url
          })
          /* 获取歌曲热门评论 */
          axios.get('/comment/hot?type=0&id=' + musicId).then(response => {
            /* 保存热门评论 */
            this.hotComments = response.data.hotComments
          })
          /* 获取歌曲封面 */
          axios.get('/song/detail?ids=' + musicId).then(response => {
            /* 设置封面 */
            this.coverUrl = response.data.songs[0].al.picUrl
          })
        },
        /* audio的play事件 */
        play() {
          this.isPlay = true
          /* 清空mv的信息 */
          this.mvUrl = ''
        },
        /* audio的pause事件 */
        pause() {
          this.isPlay = false
        },
        /* 播放mv */
        playMv(vid) {
          if (vid) {
            this.showVideo = true;
            /* 获取mv信息 */
            axios.get('/mv/url?id=' + vid).then(response => {
              /* 暂停歌曲播放 */
              this.$refs.audio.pause()
              /* 获取mv地址 */
              this.mvUrl = response.data.data.url
            })
          }
        },
        /* 关闭mv界面 */
        closeMv() {
          this.showVideo = false
          this.$refs.video.pause();
        },
        /* 搜索历史记录中的歌曲 */
        historySearch(history) {
          this.query = history
          this.searchMusic()
          this.showHistory = false;
        }
      },
    })
  </script>
</body>

</html>